<template>
  <el-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    :title="title"
    width="500px"
  >
    <el-form
      ref="ruleFormRef"
      label-position="left"
      label-width="100px"
      :model="form"
      :rules="rules"
      style="max-width: 460px"
    >
      <el-form-item label="词汇" prop="words">
        <el-input v-model="form.words" />
      </el-form-item>

      <el-form-item label="模型调用" prop="modelCall">
        <el-select v-model="form.modelCall" placeholder="请选择">
          <el-option label="ALL" value="ALL" />
          <el-option label="GRPC" value="GRPC" />
          <el-option label="HTTP" value="HTTP" />
        </el-select>
      </el-form-item>

      <el-form-item label="结果" prop="result" v-if="showResult">
        <json-viewer
          :value="jsonData.res"
          :expand-depth="5"
          copyable
          boxed
          sort
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" v-loading="modelLoading" @click="submit"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { apiCallModel } from "@/api/model";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
const modelLoading = ref(false);

interface ModelForm {
  id: number;
  words: string;
  modelCall: string;
}

const ruleFormRef = ref<FormInstance>();

const title = ref("");

let form = reactive<ModelForm>({
  id: "",
  words: "",
  modelCall: "",
});

let jsonData = reactive({
  res: {},
});

const rules = reactive<FormRules<ModelForm>>({
  words: [
    {
      required: true,
      message: "请输入分类词汇",
      trigger: "blur",
    },
  ],
  modelCall: [
    {
      required: true,
      message: "请输入模型调用方式",
      trigger: "change",
    },
  ],
});

const showResult = ref(false);

const open = (row: any) => {
  title.value = row.modelName;
  form.id = row.id;
  showResult.value = false;
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
};

const emit = defineEmits(["on-result"]);

const submit = () => {
  console.log(form);

  ruleFormRef.value.validate((valid) => {
    if (valid) {
      let data = {
        id: form.id,
        data: {
          service_type: "words",
          words: form.words,
        },
      };
      modelLoading.value = true;
      apiCallModel(data)
        .then((res) => {
          console.log("res", res);
          modelLoading.value = false;
          if (res.code == 200) {
            console.log(typeof res.data);
            jsonData.res = res.data;
            showResult.value = true;
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          modelLoading.value = false;
        });
    } else {
      return false;
    }
  });
};

// 表单校验

defineExpose({
  open,
  close,
});
</script>
